<template>
  <div class="category">
      <div class="tab">
            <ul>
                <li v-for="(item,index) in navList" :key="index" :class="{active:index ==num}" @click="tab(index)">
                    {{item}}
                </li>
            </ul>
       </div>
        <div class="tabCon">
            <div v-for="(itemCon,index) in tabContents" :key="index" v-show="index == num">
                <div class="recommend"><span class="iconfont">&#xe64c;</span>精选推荐</div> 
                      <router-link tag="div" to="/list" class="goods" v-for="item in goodsList" :key="item.id">
                        <img :src="item.imgUrl" alt="">
                        <p class="text">{{item.text}}</p>
                      </router-link>
            </div>
        </div>
  </div>
</template>

<script>

export default {
  name: 'Category',
  props:{
    goodsList:Array
  },
  data () {
    return {
        navList:['配饰','精选','女装','美妆','香薰','名物','包袋','艺术品','图书'],
        tabContents:[1,2,3,4,5,6,7,8,9],
        num:0
    }
  },
  components:{
    
  },
  methods:{
       tab (index){
          this.num = index
      }
  }
}
</script>


<style lang="stylus" scoped>
.category
    width 100%
    background-color #fff
    position relative
    .tab
        width 30%
        font-size .32rem
        text-align center
        background-color #efefef
        padding-top 1rem
        ul li
            list-style none
            // display inline-block
            height 1.34rem
            line-height 1.34rem
            width 1rem
            padding  0 0.7rem 0 .6rem 
            text-align center
            position relative
        .active
            font-weight bold
            background-color #fff
            color #000 
            &:after 
              content ''
              position absolute
              // bottom .34rem
              top auto
              left 0
              height 1.34rem
              width .06rem
              background-color #000
    .tabCon
        width 70%
        position absolute
        top 0
        left 30%
        .recommend
            width 100%
            font-size .32rem
            font-weight bold
            text-align center
            padding .4rem 0  
            span 
                padding-right .2rem
        .goods
            width 50%
            height 3rem
            float left
            img 
                width 2.4rem
                height 2.1rem
            .text
                text-align center
                font-size .32rem
</style>
